<template>
	<view class="count">
		<view class="topfenxi f  f-j-b">
			<view v-if="!content" class="lefBlod">
				<view class="">
					你的 <text>{{pet.name}}</text>
				</view>
				<view class="">
					是什么体型？
				</view>
				<view @click="ImmediateSelection" class="btn">
					立即选择
				</view>
			</view>
			<view v-else class="lefBlod">
				<view class="">
					{{name}}的体型是 <br> <text>[{{content.type}}]
					</text>
				</view>
				<view @click="ImmediateSelection" class="btns">
					重新选择
				</view>
			</view>
			<view class="rigImg">
				<image src="/static/be.png" class="be" mode=""></image>
				<image src="/static/cat@2x.png" class="catImg" mode=""></image>
			</view>
		</view>
		<view v-if="content" class="boxCount">
			<view class="nei">
				<view class="boxjian "></view>
				<view class="flexs f ">
					<view class="avat">
						<image :src="bodyType.avatar" class="avatimg" mode=""></image>
					</view>
					<view class="counts">
						{{content.con}}
					</view>
				</view>
			</view>
		</view>
		<view class="ring-chart">
			<view class="topZ f f-a-c f-j-b">
				<view class="left">
					体重曲线
				</view>
				<view class="rig">
					单位（kg）
				</view>
			</view>
			<l-echart class="l_echart" ref="ringChart"></l-echart>
		</view>
		<!-- 体重记录 -->
		<view class="WeightRecord p-20 b-r-20 b-f ">
			<view class="topTit f f-a-c f-j-b">
				<view class="Record">
					体重记录
				</view>
				<view @click="FullRecord" class="rigTou f f-a-c">
					全部记录 <image src="/static/youjian.png" class="youjian" mode=""></image>
				</view>
			</view>
			<view class="botList f f-a-c">
				<view v-for="(item,index) in list" :key="index" class="listItem f f-d-c f-a-c f-j-c">
					<view class="time">
						{{$u.timeFormat(item.recorded_time, 'mm-dd')}}
					</view>
					<view class="num">
						{{item.weight}}kg
					</view>
				</view>
			</view>
		</view>
		<view class="Tips">
			注意：一月龄以内，建议每周记录猫咪体重，如有异常，建议咨询专业宠物医生。
		</view>
	</view>
</template>

<script>
	import * as echarts from '@/uni_modules/lime-echart/static/echarts.min.js';
	export default {
		data() {
			return {
				page: 1,
				name: uni.getStorageSync('pet').name,
				list: [],
				dataList: [],
				dataTime: [],
				bodyType: uni.getStorageSync('pet') || '',
				content: '',
			}
		},
		async onShow() {
			this.content = uni.getStorageSync('content')
			this.dataList = []
			this.dataTime = []
			this.list = []
			this.page = 1
			await this.initList()
			this.loadRingData()
		},
		methods: {
			async initList() {
				let n = await this.$api.trendList({
					pet_id: uni.getStorageSync('catId'),
					page: this.page,
					limit: 7
				})
				this.list = n.data.rows
				this.list.forEach((item, index) => {
					this.dataTime.push(this.$u.timeFormat(item.recorded_time, 'mm/dd'))
				})
				this.list.forEach(item => {
					if (item.weight > 100) {
						this.dataList.push(100)
					} else {
						this.dataList.push(item.weight)
					}
				})
			},
			FullRecord() {
				uni.navigateTo({
					url: '/pages/home/Records'
				})
			},
			ImmediateSelection() {
				uni.navigateTo({
					url: '/pages/home/ImmediateSelection'
				})
			},
			async loadRingData() {
				await this.$nextTick()
				// this.list = data

				// console.log(data, '123456789');
				//这里option配置参考文档：https://echarts.apache.org/zh/option.html
				this.$refs.ringChart.init(echarts, chart => {
					chart.setOption({
						xAxis: {
							type: 'category',
							data: this.dataTime,
							axisLabel: {
								fontSize: 8,
							}
							// data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
							// data: [this.dataTime[this.dataTime.length - 1] || 0, '', '', '', '', '',
							// 	'', '', '', '', '', '',
							// 	'',
							// 	'', '', '',
							// 	'', '', '', '', '', '', '', '', '', '', '', '', '', '', this
							// 	.dataTime[0] || 0
							// ],
							// data: ['10.8', '10.8', '10.9', '10.10', '10.12', '10.14']
						},
						yAxis: {
							type: 'value'
						},
						series: [{
							showSymbol: false,
							data: this.dataList.reverse(),
							type: 'line',
							smooth: true,
							lineStyle: {
								color: '#977961'
							}
						}]
					});

				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.Tips {
		font-size: 24rpx;
		font-family: PingFang SC, PingFang SC-400;
		font-weight: 400;
		text-align: LEFT;
		line-height: 1.5;
		color: #ada6a0;
		padding: 20rpx 40rpx;
	}

	.boxCount {
		// position: relative;
		// z-index: 1000;
		// height: 200rpx;
		padding: 20rpx;
		width: 90%;
		margin: 0 auto;
		border-radius: 25rpx;
		background: #fffefc;
		margin-top: -100rpx;
		box-shadow: 0rpx 12rpx 64rpx 0rpx rgba(151, 121, 97, 0.07);
		margin-bottom: 120rpx;

		.nei {
			width: 100%;
			height: 100%;
			position: relative;
			z-index: 8888;

			.counts {
				width: 80%;
				font-size: 24rpx;
				font-family: PingFang SC, PingFang SC-500;
				font-weight: 500;
				color: $hei;
			}

			.avat {
				width: 64rpx;
				height: 64rpx;
				border: 2rpx solid $brown;
				border-radius: 60rpx;
				overflow: hidden;

				.avatimg {
					width: 100%;
					height: 100%;
				}
			}

			.flexs {
				justify-content: space-around;
			}

			.boxjian {
				position: absolute;
				width: 0%;
				height: 0;
				border: 30rpx solid #fff;
				border-left-color: transparent;
				border-top-color: transparent;
				border-right-color: transparent;
				top: -75rpx;
				left: 50rpx;


			}
		}
	}

	.botList {
		margin-top: 30rpx;
		overflow: auto;

		.listItem {
			width: 122rpx;
			height: 136rpx;
			background: #f7f6f2;
			border-radius: 16rpx;
			flex-shrink: 0;
			margin-right: 20rpx;

			.num {
				font-size: 28rpx;
				font-family: HarmonyOS Sans, HarmonyOS Sans-700;
				font-weight: 700;
				text-align: LEFT;
				color: $hei;
			}

			.time {
				font-size: 24rpx;
				font-family: PingFang SC, PingFang SC-400;
				font-weight: 400;
				text-align: LEFT;
				color: $hui;
				margin-bottom: 5rpx;
			}
		}
	}

	.WeightRecord {
		width: 90%;
		margin: 0 auto;
		margin-top: 25rpx;
		box-shadow: 0rpx 12rpx 64rpx 0rpx rgba(151, 121, 97, 0.07);

		.topTit {
			.Record {
				font-size: 32rpx;
				font-family: PingFang SC, PingFang SC-500;
				font-weight: 600;
				text-align: LEFT;
				color: $hei;
			}

			.rigTou {
				font-size: 24rpx;
				font-family: PingFang SC, PingFang SC-500;
				font-weight: 500;
				text-align: LEFT;
				color: $brown;

				.youjian {
					width: 14rpx;
					height: 20rpx;
					margin-left: 15rpx;
				}
			}
		}
	}

	.topfenxi {
		width: 100%;
		// height: 504rpx;
		padding-bottom: 20rpx;
		padding-left: 50rpx;
		padding-top: 50rpx;
		background-image: linear-gradient(0deg, #faf9f5 100%, #faf9f5 0%) !important;

		.rigImg {
			position: relative;
			height: 350rpx;
			width: 350rpx;

			.be {
				position: absolute;
				width: 100%;
				height: 100%;
				z-index: 1;
			}

			.catImg {
				width: 216rpx;
				height: 216rpx;
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
			}
		}

		.lefBlod {
			font-size: 40rpx;
			font-family: PingFang SC, PingFang SC-600;
			font-weight: 600;
			text-align: left;
			color: $hei;

			text {
				color: $brown;
			}



			.btn {
				width: 160rpx;
				height: 64rpx;
				line-height: 64rpx;
				background: $brown;
				border-radius: 44rpx;
				text-align: center;
				font-size: 24rpx;
				font-family: PingFang SC, PingFang SC-500;
				font-weight: 500;
				color: #ffffff;
				margin-top: 20rpx;
			}

			.btns {
				width: 160rpx;
				height: 64rpx;
				line-height: 64rpx;
				background: $brown;
				border-radius: 44rpx;
				text-align: center;
				font-size: 24rpx;
				font-family: PingFang SC, PingFang SC-500;
				font-weight: 500;
				color: #ffffff;
				margin-top: 40rpx;
			}
		}
	}

	/deep/ .lime-echart__canvas {
		height: 450rpx !important;
	}

	.ring-chart {
		position: relative;
		width: 90%;
		margin: 0 auto;
		background: #fffefc;
		margin-top: 50rpx;
		border-radius: 30rpx;
		padding: 30rpx;
		padding-bottom: 0;
		margin-top: -100rpx;
		z-index: 10;
		box-shadow: 0rpx 12rpx 64rpx 0rpx rgba(151, 121, 97, 0.07);

		.topZ {
			font-size: 32rpx;
			font-family: PingFang SC, PingFang SC-500;
			font-weight: 600;
			color: $hei;
		}

		.rig {
			font-size: 20rpx;
			font-family: PingFang SC, PingFang SC-400;
			font-weight: 400;
			color: $hui;
		}
	}

	.count {
		height: 100vh;
		width: 100%;
		background-color: #f7f6f2;
	}
</style>